<template>
	<div class="scan">
		<video :id="vId" autoplay style="width: 100%; height: 500px;"></video>
	</div>
</template>

<script>
import { BrowserMultiFormatReader } from '@zxing/library';
export default{
	name:"scan",
	data(){
		return{
			vId: 'codeVideo',
			codeReader: new BrowserMultiFormatReader(),
			text:""
		}
	},
	created() {
			this.scanCode();
		},
	methods: {
		scanCode() {
			this.codeReader.getVideoInputDevices().then((videoInputDevices) => {
				const leng = videoInputDevices.length;
				if (!leng) {
					return console.error( '找不到摄像头');	
				}
				const deviceId = videoInputDevices[leng - 1].deviceId;
				this.codeReader.decodeFromInputVideoDeviceContinuously(deviceId, this.vId, (result, err) => {
					if (result) {
						console.error(result.text);
						this.text = result.text;
						alert(this.text);
					}
					if (err) {
						console.error(err);
					}
				});
			}).catch(err => {
				console.error(err);
			}).finally(() => {
				this.codeReader.reset(); // 销毁扫描
			});
		},
	}
}
</script>

<style>
</style>